<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="An enterprise-class UI design language and React-based implementation with a set of high-quality React components, one of best React UI library for enterprises">
    <title>Ant Design - A UI Design Language</title>
    <link rel="icon" href="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="/index-1.css"/>
    <link rel="stylesheet" type="text/css" href="/index-2.css"/>
    <style id="nprogress-style">
      #nprogress { display: none }
    </style>
    <link rel="stylesheet/less" type="text/css" href="/color.less"/>
    <script src="https://gw.alipayobjects.com/os/lib/??es6-shim/0.35.3/es6-sham.min.js,es6-shim/0.35.3/es6-shim.min.js"></script>
    <!--[if lte IE 10]>
    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
    <![endif]-->
    <script>
    if (!window.Intl) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
    }
    </script>
    <script>
    (function() {
      function isLocalStorageNameSupported() {
        var testKey = 'test';
        var storage = window.localStorage;
        try {
          storage.setItem(testKey, '1');
          storage.removeItem(testKey);
          return true;
        } catch (error) {
          return false;
        }
      }
      // 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
      var pathname = location.pathname;

      function isZhCN(pathname) {
        return /-cn\/?$/.test(pathname);
      }
      function getLocalizedPathname(path, zhCN) {
        var pathname = path.startsWith('/') ? path : '/' + path;
        if (!zhCN) { // to enUS
          return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
        } else if (pathname === '/') {
          return '/index-cn';
        } else if (pathname.endsWith('/')) {
          return pathname.replace(/\/$/, '-cn/');
        }
        return pathname + '-cn';
      }

      // 兼容旧的 URL， `?locale=...`
      var queryString = location.search;
      if (queryString) {
        var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
        if (isZhCNConfig && !isZhCN(pathname)) {
          location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
        }
      }

      // 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
      if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
        var lang = (window.localStorage && localStorage.getItem('locale')) || ((navigator.language || navigator.browserLanguage).toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
        // safari is 'zh-cn', while other browser is 'zh-CN';
        if ((lang === 'zh-CN') !== isZhCN(pathname)) {
          location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
        }
      }
      document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
    })()
    </script>
  </head>
  <body>
    <div id="react-content">
      <div class="page-wrapper"><header id="header" class="clearfix"><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a id="logo" href="/"><img alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"/><img alt="Ant Design" src="https://gw.alipayobjects.com/zos/rmsportal/DkKNubTaaVsKURhcVGkh.svg"/></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div id="search-box"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i><input type="text" placeholder="Search in ant.design" class="ant-input"/></div><button type="button" class="ant-btn header-lang-button ant-btn-sm ant-btn-background-ghost"><span>中文</span></button><div class="ant-select-sm version ant-select ant-select-enabled"><div class="ant-select-selection
            ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0"><div class="ant-select-selection__rendered"><div class="ant-select-selection-selected-value" title="3.10.3" style="display:block;opacity:1">3.10.3</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none" unselectable="on"><i class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div></div><ul class="ant-menu menu-site ant-menu-light ant-menu-root ant-menu-horizontal" id="nav" role="menu"><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="/"><span>Home</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="/docs/spec/introduce"><span>Guidelines</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item ant-menu-item-selected" role="menuitem"><a href="/docs/react/introduce"><span>Components</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="http://pro.ant.design" class="header-link" target="_blank" rel="noopener noreferrer"><span>PRO</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul></div></div></header><div class="main-wrapper"><div class="ant-row"><div class="main-menu ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-6 ant-col-xl-5 ant-col-xxl-4"><ul class="ant-menu aside-container menu-site ant-menu-light ant-menu-root ant-menu-inline" role="menu"><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/introduce">Ant Design of React</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/getting-started">Getting Started</a></li><li class="ant-menu-item ant-menu-item-selected" role="menuitem" style="padding-left:40px"><a href="/docs/react/practical-projects">Real project with umi and dva</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/use-with-create-react-app">Use in create-react-app</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/use-in-typescript">Use in TypeScript</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/customize-theme">Customize Theme</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/changelog">Change Log</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/recommendation">Third-Party Libraries</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/i18n">Internationalization</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/faq">FAQ</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/react/contributing">Contributing</a></li><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Components$Menu" aria-haspopup="true"><h4>Components</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="Components$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="General">General</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/button/"><span>Button</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/icon/"><span>Icon</span><span class="chinese"></span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Layout">Layout</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/grid/"><span>Grid</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/layout/"><span>Layout</span><span class="chinese"></span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Navigation">Navigation</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/affix/"><span>Affix</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/breadcrumb/"><span>Breadcrumb</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/dropdown/"><span>Dropdown</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/menu/"><span>Menu</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/pagination/"><span>Pagination</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/steps/"><span>Steps</span><span class="chinese"></span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Data Entry">Data Entry</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/auto-complete/"><span>AutoComplete</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/cascader/"><span>Cascader</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/checkbox/"><span>Checkbox</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/date-picker/"><span>DatePicker</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/form/"><span>Form</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/input/"><span>Input</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/input-number/"><span>InputNumber</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/mention/"><span>Mention</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/rate/"><span>Rate</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/radio/"><span>Radio</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/select/"><span>Select</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/slider/"><span>Slider</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/switch/"><span>Switch</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tree-select/"><span>TreeSelect</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/time-picker/"><span>TimePicker</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/transfer/"><span>Transfer</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/upload/"><span>Upload</span><span class="chinese"></span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Data Display">Data Display</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/avatar/"><span>Avatar</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/badge/"><span>Badge</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/calendar/"><span>Calendar</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/card/"><span>Card</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/carousel/"><span>Carousel</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/collapse/"><span>Collapse</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/list/"><span>List</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/popover/"><span>Popover</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tooltip/"><span>Tooltip</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/table/"><span>Table</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tabs/"><span>Tabs</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tag/"><span>Tag</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/timeline/"><span>Timeline</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/tree/"><span>Tree</span><span class="chinese"></span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Feedback">Feedback</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/alert/"><span>Alert</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/drawer/"><span>Drawer</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/modal/"><span>Modal</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/message/"><span>Message</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/notification/"><span>Notification</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/progress/"><span>Progress</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/popconfirm/"><span>Popconfirm</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/spin/"><span>Spin</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/skeleton/"><span>Skeleton</span><span class="chinese"></span></a></li></ul></li><li class=" ant-menu-item-group"><div class="ant-menu-item-group-title" title="Other">Other</div><ul class="ant-menu-item-group-list"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/anchor/"><span>Anchor</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/back-top/"><span>BackTop</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/divider/"><span>Divider</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/components/locale-provider/"><span>LocaleProvider</span><span class="chinese"></span></a></li></ul></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-18 ant-col-xl-19 ant-col-xxl-20"><article class="markdown"><h1>Real project with umi and dva<a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/react/practical-projects.en-US.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></h1><div class="toc-affix"><div class=""><ul class="toc"><li><a class="bisheng-toc-h2" href="#Create-New-App" title="Create New App">Create New App</a></li><li><a class="bisheng-toc-h2" href="#Integrate-antd" title="Integrate antd">Integrate antd</a></li><li><a class="bisheng-toc-h2" href="#Create-Routes" title="Create Routes">Create Routes</a></li><li><a class="bisheng-toc-h2" href="#Write-UI-Components" title="Write UI Components">Write UI Components</a></li><li><a class="bisheng-toc-h2" href="#Define-dva-Model" title="Define dva Model">Define dva Model</a></li><li><a class="bisheng-toc-h2" href="#Connect" title="Connect">Connect</a></li><li><a class="bisheng-toc-h2" href="#Build" title="Build">Build</a></li><li><a class="bisheng-toc-h2" href="#What&#x27;s-Next" title="What&#x27;s Next">What&#x27;s Next</a></li></ul></div></div><section class="markdown"><p>In real project development, you might need a data flow solution like Redux or MobX. Ant Design React is a UI library that can be used with any data flow solution and application framework within the React ecosystem. We have launched dva based on Redux, as well as a pluggable enterprise application framework umi, which is recommended for use in your projects.</p><p>Dva is a lightweight data flow solution based on Redux. The concept comes from elm. It supports side effects, hot module replacement, dynamic loading, react-native, SSR, etc. It has been widely used in production.</p><p>And <a href="http://umijs.org/">umi</a> is a routing-based framework that supports <a href="https://umijs.org/guide/router.html">next.js-like conventional routing</a> and various advanced routing functions, such as <a href="https://umijs.org/en/plugin/umi-plugin-react.html#dynamicimport">routing-level on-demand loading</a>. With a complete <a href="https://umijs.org/plugin/">plugin system</a> that covers every life cycle from source code to build product, umi is able to support various functional extensions and business needs.</p><blockquote><p>You may also be interested in <a href="https://pro.ant.design/">Ant Design Pro</a>, an Out-of-box UI solution for enterprise applications based on umi, dva and ant design.</p></blockquote><p>This article will guide you to create a simple application from zero using umi, dva and antd.</p><h2 id="Create-New-App"><span>Create New App</span><a href="#Create-New-App" class="anchor">#</a></h2><p>First create an empty directory,</p><pre class="language-bash"><code>$ <span class="token function">mkdir</span> myapp
$ <span class="token function">cd</span> myapp</code></pre><p>It is recommended to use yarn to create an application and execute the following command.</p><blockquote><p>If you insist on using npm, execute <code>npm install -g create-umi &amp;&amp; create-umi</code> and the effect will be the same.</p></blockquote><pre class="language-bash"><code>$ yarn create umi

yarn create v1.12.0
<span class="token punctuation">[</span>1/4<span class="token punctuation">]</span> 🔍  Resolving packages<span class="token punctuation">..</span>.
<span class="token punctuation">[</span>2/4<span class="token punctuation">]</span> 🚚  Fetching packages<span class="token punctuation">..</span>.
<span class="token punctuation">[</span>3/4<span class="token punctuation">]</span> 🔗  Linking dependencies<span class="token punctuation">..</span>.
<span class="token punctuation">[</span>4/4<span class="token punctuation">]</span> 📃  Building fresh packages<span class="token punctuation">..</span>.

success Installed <span class="token string">"create-umi@0.3.1"</span> with binaries:
      - create-umi

? What functionality <span class="token keyword">do</span> you want to enable? <span class="token punctuation">(</span>Press <span class="token operator">&lt;</span>space<span class="token operator">></span> to select, <span class="token operator">&lt;</span>a<span class="token operator">></span> to toggle all, <span class="token operator">&lt;</span>i
<span class="token operator">></span> to invert selection<span class="token punctuation">)</span>
❯◯ antd
 ◯ dva
 ◯ code splitting
 ◯ pwa
 ◯ dll
 ◯ hard <span class="token function">source</span></code></pre><p>Yarn will install the latest version of <a href="https://github.com/umijs/create-umi">create-umi</a> and then create the app with interactive ui.</p><p>Select <code>antd</code> and <code>dva</code> and press Enter to confirm.</p><pre class="language-bash"><code>   create package.json
   create mock/.gitkeep
   create src/assets/yay.jpg
   create src/layouts/index.css
   create src/layouts/index.js
   create src/pages/index.css
   create src/pages/index.js
   create src/global.css
   create .gitignore
   create .editorconfig
   create .env
   create .umirc.js
   create .eslintrc
   create .prettierrc
   create .prettierignore
   create src/models/.gitkeep
   create src/dva.js
✨  File Generate Done
✨  Done <span class="token keyword">in</span> 966.73s.</code></pre><p>Then install dependencies,</p><pre class="language-bash"><code>$ yarn</code></pre><p>Then start the app,</p><pre class="language-bash"><code>$ yarn start</code></pre><p>After a few seconds, you will see the following output,</p><pre class="language-bash"><code> DONE  Compiled successfully <span class="token keyword">in</span> 212ms

  App running at:
  - Local:   http://localhost:8000/
  - Network: http://<span class="token punctuation">{</span><span class="token punctuation">{</span> YourIP <span class="token punctuation">}</span><span class="token punctuation">}</span>:8000/</code></pre><p>Open <a href="http://localhost:8000">http://localhost:8000</a> in your browser, you will see the welcome page of umi.</p><p><img src="https://gw.alipayobjects.com/zos/rmsportal/lewbQdlEHzuNDpaxykUP.png" width="718"/></p><h2 id="Integrate-antd"><span>Integrate antd</span><a href="#Integrate-antd" class="anchor">#</a></h2><p>After selecting <code>antd</code> earlier, antd&#x27;s dependencies are automatically handled and loaded on demand. You can check the configuration in <code>.umirc.js</code> to make sure antd is turned on.</p><pre class="language-js"><code><span class="token comment" spellcheck="true">// ref: https://umijs.org/config/</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token comment" spellcheck="true">// ref: https://umijs.org/plugin/umi-plugin-react.html</span>
    <span class="token punctuation">[</span><span class="token string">'umi-plugin-react'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      antd<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
      dva<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span></code></pre><blockquote><p>And if you want to use a fixed version of antd, you can install additional antd dependency in your project, and the antd dependencies declared in package.json will be used first.</p></blockquote><h2 id="Create-Routes"><span>Create Routes</span><a href="#Create-Routes" class="anchor">#</a></h2><p>We need to write an application displaying the list of products. The first step is to create a route.</p><p>If you don&#x27;t have npx, you need to install it first to execute the commands under node_modules.</p><pre class="language-bash"><code>$ yarn global add npx</code></pre><p>Then create a <code>/products</code> route,</p><pre class="language-bash"><code>$ npx umi g page products

   create src/pages/products.js
   create src/pages/products.css
✔  success</code></pre><p>Then open <a href="http://localhost:8000/products">http://localhost:8000/products</a> in your browser and you should see the corresponding page.</p><h2 id="Write-UI-Components"><span>Write UI Components</span><a href="#Write-UI-Components" class="anchor">#</a></h2><p>As your application grows and you notice you are sharing UI elements between multiple pages (or using them multiple times on the same page), in umi it&#x27;s called reusable components.</p><p>Let&#x27;s create a <code>ProductList</code> component that we can use in multiple places to show a list of products.</p><p>Create <code>src/components/ProductList.js</code> by typing:</p><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Table<span class="token punctuation">,</span> Popconfirm<span class="token punctuation">,</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> ProductList <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> onDelete<span class="token punctuation">,</span> products <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> columns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Name'</span><span class="token punctuation">,</span>
    dataIndex<span class="token punctuation">:</span> <span class="token string">'name'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    title<span class="token punctuation">:</span> <span class="token string">'Actions'</span><span class="token punctuation">,</span>
    render<span class="token punctuation">:</span> <span class="token punctuation">(</span>text<span class="token punctuation">,</span> record<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">(</span>
        <span class="token operator">&lt;</span>Popconfirm title<span class="token operator">=</span><span class="token string">"Delete?"</span> onConfirm<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">onDelete</span><span class="token punctuation">(</span>record<span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
    <span class="token operator">&lt;</span>Button<span class="token operator">></span>Delete<span class="token operator">&lt;</span><span class="token operator">/</span>Button<span class="token operator">></span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>Popconfirm<span class="token operator">></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>Table
      dataSource<span class="token operator">=</span><span class="token punctuation">{</span>products<span class="token punctuation">}</span>
      columns<span class="token operator">=</span><span class="token punctuation">{</span>columns<span class="token punctuation">}</span>
    <span class="token operator">/</span><span class="token operator">></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> ProductList<span class="token punctuation">;</span></code></pre><h2 id="Define-dva-Model"><span>Define dva Model</span><a href="#Define-dva-Model" class="anchor">#</a></h2><p>After completing the UI, we will begin processing the data and logic.</p><p>dva manages the domain model with <code>model</code>, with reducers for synchronous state updates, effects for async logic, and subscriptions for data source subscribe.</p><p>Let&#x27;s create a model <code>src/models/products.js</code> by typing,</p><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  namespace<span class="token punctuation">:</span> <span class="token string">'products'</span><span class="token punctuation">,</span>
  state<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  reducers<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token string">'delete'</span><span class="token punctuation">(</span>state<span class="token punctuation">,</span> <span class="token punctuation">{</span> payload<span class="token punctuation">:</span> id <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> state<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>item <span class="token operator">=</span><span class="token operator">></span> item<span class="token punctuation">.</span>id <span class="token operator">!==</span> id<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre><p>In this model:</p><ul><li><p><code>namespace</code> represents the key on global state</p></li><li><p><code>state</code> is the initial value, here it is an empty array</p></li><li><p><code>reducers</code> is equivalent to a reducer in redux, accepting an action, and update state simultaneously</p></li></ul><p>In umi, the model files under <code>src/models</code> will be automatically injected, you don&#x27;t need to inject manually.</p><h2 id="Connect"><span>Connect</span><a href="#Connect" class="anchor">#</a></h2><p>So far, we have completed a separate model and component. How do we connect them together?</p><p>dva provides a <code>connect</code> method. If you are familiar with redux, this connect is from react-redux.</p><p>Edit <code>src/pages/products.js</code> and replact it with the following,</p><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> connect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'dva'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> ProductList <span class="token keyword">from</span> <span class="token string">'../components/ProductList'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> Products <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> dispatch<span class="token punctuation">,</span> products <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
  <span class="token keyword">function</span> <span class="token function">handleDelete</span><span class="token punctuation">(</span>id<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      type<span class="token punctuation">:</span> <span class="token string">'products/delete'</span><span class="token punctuation">,</span>
      payload<span class="token punctuation">:</span> id<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>div<span class="token operator">></span>
      <span class="token operator">&lt;</span>h2<span class="token operator">></span>List <span class="token keyword">of</span> Products<span class="token operator">&lt;</span><span class="token operator">/</span>h2<span class="token operator">></span>
      <span class="token operator">&lt;</span>ProductList onDelete<span class="token operator">=</span><span class="token punctuation">{</span>handleDelete<span class="token punctuation">}</span> products<span class="token operator">=</span><span class="token punctuation">{</span>products<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">connect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">{</span> products <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
  products<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">(</span>Products<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>Finally, we need some initial data to make the application run together. Edit <code>src/app.js</code>,</p><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">const</span> dva <span class="token operator">=</span> <span class="token punctuation">{</span>
  config<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function">onError</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      err<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    initialState<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      products<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'dva'</span><span class="token punctuation">,</span> id<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'antd'</span><span class="token punctuation">,</span> id<span class="token punctuation">:</span> <span class="token number">2</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre><p>Refresh your browser, you should see the following result:</p><p><img src="https://zos.alipayobjects.com/rmsportal/GQJeDDeUCSTRMMg.gif"/></p><h2 id="Build"><span>Build</span><a href="#Build" class="anchor">#</a></h2><p>Now that we&#x27;ve written our application and verified that it works in development, it&#x27;s time to get it ready for deployment to our users. To do so, run the following command,</p><pre class="language-bash"><code>$ <span class="token function">npm</span> run build</code></pre><p>After a few seconds, the output should be as follows,</p><pre class="language-bash"><code><span class="token operator">></span> @ build /private/tmp/sorrycc-V0lLrF
<span class="token operator">></span> umi build

<span class="token punctuation">[</span>5:01:58 PM<span class="token punctuation">]</span> webpack compiled <span class="token keyword">in</span> 11s 615ms


 DONE  Compiled successfully <span class="token keyword">in</span> 11622ms                                           5:01:58 PM

File sizes after gzip:

  340.44 KB  dist/umi.js
  17.82 KB   dist/umi.css</code></pre><p>The <code>build</code> command packages up all of the assets that make up your application —— JavaScript, templates, CSS, web fonts, images, and more. Then you can find these files in the <code>dist/</code> directory.</p><h2 id="What&#x27;s-Next"><span>What&#x27;s Next</span><a href="#What&#x27;s-Next" class="anchor">#</a></h2><p>We have completed a simple application, but you may still have lots of questions, such as:</p><ul><li><p>How to handle onError globally and locally?</p></li><li><p>How to handle routes?</p></li><li><p>How to mock data?</p></li><li><p>How to deploy?</p></li><li><p>ant so on...</p></li></ul><p>You can:</p><ul><li><p>Visit <a href="https://umijs.org/">umi offcial website</a> and <a href="https://dvajs.com/">dva offcial website</a></p></li><li><p>Know <a href="https://umijs.org/zh/guide/router.html">the umi routes</a></p></li><li><p>Know <a href="https://umijs.org/zh/guide/deploy.html">how to deploy umi application</a></p></li><li><p>Checkout <a href="https://dvajs.com/knowledgemap/">dva knowledge</a>, including all the basic knowledge with ES6, React, dva</p></li><li><p>Be familiar with the <a href="https://dvajs.com/guide/concepts.html">8 Concepts of dva</a>, and understand how they are connected together</p></li></ul></section><section class="markdown api-container"></section></article></div></div><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-18 ant-col-lg-offset-6 ant-col-xl-19 ant-col-xl-offset-5 ant-col-xxl-20 ant-col-xxl-offset-4"><section class="prev-next-nav"><a class="prev-page" href="/docs/react/getting-started"><i class="anticon anticon-left footer-nav-icon-before"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>Getting Started<i class="anticon anticon-right footer-nav-icon-after"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a><a class="next-page" href="/docs/react/use-with-create-react-app"><i class="anticon anticon-left footer-nav-icon-before"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i>Use in create-react-app<i class="anticon anticon-right footer-nav-icon-after"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></section></div></div></div><footer id="footer"><div class="footer-wrap"><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>Resources</span></h2><div><a href="http://pro.ant.design">Ant Design Pro</a></div><div><a href="http://mobile.ant.design">Ant Design Mobile</a></div><div><a href="http://ng.ant.design">NG-ZORRO</a><span> - </span>Ant Design of Angular</div><div><a href="http://ng.mobile.ant.design">NG-ZORRO-MOBILE</a></div><div><a target="_blank " href="https://github.com/websemantics/awesome-ant-design"><span>Awesome Ant Design</span></a></div><div><span class="ant-badge"><a target="_blank" rel="noopener noreferrer" href="http://kitchen.alipay.com">Kitchen</a><span> - </span><span>Sketch Toolkit</span><sup data-show="true" class="ant-scroll-number ant-badge-dot" style="right:-3px;margin-top:0"></sup></span></div><div><a href="http://scaffold.ant.design">Scaffolds</a><span> - </span><span>Scaffold Market</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://umijs.org/">Umi</a> - <span>React Application Framework</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva">dva</a> - <span>Data Flow Framework</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design">Ant Motion</a><span> - </span><span>Motion Solution</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/">Axure Library</a><span> - </span><span>Axure library</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design">Ant UX</a><span> - </span><span>Sitemap Template</span></div><div><a target="_blank " href="http://ant-design.gitee.io/"><span>China Mirror 🇨🇳</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>Community</span></h2><div><a target="_blank" rel="noopener noreferrer" href="http://zhuanlan.zhihu.com/antdesign"><span>Zhihu</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://medium.com/ant-design/">Medium</a></div><div><a target="_blank" rel="noopener noreferrer" href="http://twitter.com/antdesignui">Twitter</a></div><div><a target="_blank" rel="noopener noreferrer" href="http://zhuanlan.zhihu.com/xtech"><span>Experience Cloud Blog</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://seeconf.alipay.com/">SEE Conf</a><span> - </span><span>Seeking Experience &amp; Engineering Conference</span></div><div><a target="_blank " href="/docs/spec/work-with-us"><span>Work with Us</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>Help</span></h2><div><a target="_blank " href="https://github.com/ant-design/ant-design">GitHub</a></div><div><a href="/changelog"><span>Change Log</span></a></div><div><a target="_blank " href="https://www.yuque.com/ant-design/course"><span>Ant Design Practical Tutorial</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="/docs/react/faq"><span>FAQ</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design"><span>Chat Room (中文)</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design-english"><span>Chat Room (English)</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://new-issue.ant.design/"><span>Bug Report</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues"><span>Issues</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd"><span>StackOverflow</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd"><span>SegmentFault</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><img class="title-icon" src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg" alt="AFX Cloud"/><span>More Products</span></h2><div><a target="_blank" rel="noopener noreferrer" href="https://yuque.com/"><span>YuQue</span></a><span> - </span><span>Write your document as a team</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://yunfengdie.com/"><span>FengDie</span></a><span> - </span><span>Mobile web app builder</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/">AntV</a><span> - </span><span>Data Visualization</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/">Egg</a><span> - </span><span>Enterprise Node Framework</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://xcloud.alipay.com/"><span>Ant Experience Cloud</span></a></div><div style="margin-top:20px"><div><div style="padding:4px;background:#fff;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.1);display:inline-block;cursor:pointer"><div style="width:80px;height:16px;border-radius:2px;background:#1890ff"></div></div></div></div></div></div></div></div><div class="bottom-bar">Made with <span class="heart">❤</span> by<a target="_blank" rel="noopener noreferrer" href="https://xtech.antfin.com"><span>AFX</span></a></div></footer></div>
    </div>
    <script src="/common.js"></script>
    <script src="/index.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-72788897-1"></script>
    <script>
    if (!location.port) {
      // Enable Google Analytics
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-72788897-1');
    }
    </script>
    <!-- Hotjar Tracking Code for ant.design -->
    <script>
    (function(h,o,t,j,a,r){
      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
      h._hjSettings={hjid:473408,hjsv:5};
      a=o.getElementsByTagName('head')[0];
      r=o.createElement('script');r.async=1;
      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
      a.appendChild(r);
    })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
    </script>
  </body>
</html>
